.content {
    display: flex;
    position: relative;
    padding: 8px 10px 8px 34px;
    line-height: 1;
    font-size: 12px;
    border: 1px solid;
    border-radius: 2px;
    line-height: 1.5;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);

    &.success {
        color: #5fc679;
        background: url('./image/icon-notification-success.png') no-repeat top 10px left 10px #e6faf1;
        background-size: 16px 16px;
        border-color: #b7eec8;
    }

    &.error {
        color: #f66363;
        background: url('./image/icon-notification-error.png') no-repeat top 10px left 10px #fef4f6;
        background-size: 16px 16px;
        border-color: #febbc4;
    }

    &.warning {
        color: #f9ab71;
        background: url('./image/icon-notification-warning.png') no-repeat top 10px left 10px #fff5ee;
        background-size: 16px 16px;
        border-color: #ffd9bd;
    }

    &.info {
        color: #8ca9d9;
        background: url('./image/icon-notification-info.png') no-repeat top 10px left 10px #e9f4fe;
        background-size: 16px 16px;
        border-color: #d2e4f4;
    }
}